<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="/js/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="/js/bootstrap.bundle.js"></script>
    <script src="/js/transmitdata.js"></script>
    <style>
        #menu {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            box-shadow: 2px 2px 5px #aaa;
            padding: 5px;
        }

        li:hover {
            background-color: #ddd;
            pointer-events: initial;
        }
    

        .file {
            height: 50px;
            width: 100vw;
            background-color: #f5f4f4;
            display: flex;
            border: .1px solid #a7a7a4;
            padding: 10px 20px;
            margin: 0 20px;
        }

        .file:hover{
            background-color: #c7c7c5;
            cursor: pointer;
        }

        .file .img {
            width: 30px;
            height: 30px;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .file .name {
            margin-left: 10px;
            font-size: 20px;
            white-space: nowrap;
        }
    </style>
</head>

<body>
    <button type="button" class="btn btn-link" onclick="re()">返回上一级</button>
    <button style="background-image: url(/photo/reMenu.png);background-position: center;height: 4vh;width: 4vh; background-repeat: no-repeat;background-size: cover;" onclick="formSubmit(`get`,`/menu/reMenu`,null);"></button>
    <button  style="display: none;" type="button" class="btn btn-link disvisible" onclick="openCreateFileModel()">创建文件</button>
    <button style="display: none;" type="button" class="btn btn-link disvisible" onclick="openCreateDirModel()">创建目录</button>
    <!-- 菜单项 -->
    <div id="menu">
        <ul>
            <li  onclick="openCreateFileModel()"> 创建文件</li>
            <li onclick="openCreateDirModel()">创建目录</li>
            <li onclick="Delete()">删除</li>
            <li onclick="Open()">打开</li>
            <li onclick="showBlock()"> 显示当前点击文件的物理块</li>
        </ul>
    </div>
<!-- 输入模态框 -->
    <button  style="display: none;" id="CreateInput" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop1" >
      </button>
      
      <!-- Modal -->
      <div class="modal fade" id="staticBackdrop1" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h1 class="modal-title fs-5" id="staticBackdropLabel">创建文件界面</h1>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="input-group mb-3">
                    <form id="createForm" action="/showFileSystem/createFile" method="post">
                    <input id="fileNameInput" name="fileName" type="text" class="form-control" placeholder="输入文件名：" aria-label="Username">
                    <span class="input-group-text">|||</span>
                    <input id="fileSizeInput" name="fileSize" type="text" class="form-control" placeholder="输入文件大小:" aria-label="Server">
                </form>
                  </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">不创建</button>
              <button type="button" class="btn btn-primary" onclick="createFIle()">创建</button>
            </div>
          </div>
        </div>
      </div>
<!-- 输入模态框2(目录) -->
<button  style="display: none;" id="CreateInput2" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop2" >
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop2" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="staticBackdropLabel">创建目录界面</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
          <div class="input-group mb-3">
              <form id="createForm2" action="/showFileSystem/createDir" method="post">
              <input id="fileNameInput2" name="fileName" type="text" class="form-control" placeholder="输入文件名：" aria-label="Username">
          </form>
            </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">不创建</button>
        <button type="button" class="btn btn-primary" onclick="createDir()">创建</button>
      </div>
    </div>
  </div>
</div>

<!-- Model3 -->
<button style="display: none;" id="showBlockButton" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop3">
    
  </button>
  
  <!-- Modal -->
  <div class="modal fade" id="staticBackdrop3" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="staticBackdropLabel">Modal title</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body" id="showBlockText">
          
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
    <script>
        var dirNodeClass = function (fileName, inodeNumber, isFile) {
            var _this = this;
            this.fileName = fileName;
            this.inodeNumber = (Number)(inodeNumber);
            this.isFile = isFile;
            this.addItem = function () {
                var div = document.createElement("div");
                div.classList.add("file")//文件格式!!!!!
                var photo = "dir"
                if (_this.isFile)
                    photo = "file"
                div.innerHTML = `<div style="background-image: url(/photo/${photo}.png);" class="img"></div>
         <div class="name">${_this.fileName}</div>`
                //绑定监听事件
                div.addEventListener('contextmenu', function (event) {
                    current= _this;
                    console.log('点了右键' + _this.fileName);

                    event.preventDefault();
                    showMenu(event);
                })
                div.addEventListener('dblclick', function (event) {
                    event.preventDefault();
                    current= _this;
                    
                    console.log('双击了' + _this.fileName);
                    Open();
                });
                document.body.appendChild(div)
            }
        }
        function openCreateFileModel()
        {
            console.log("asdfgv")
            $("#CreateInput")[0].click();
        }
        function openCreateDirModel()
        {
            console.log("asdfgv")
            $("#CreateInput2")[0].click();
        }
        function createFIle()
        {
            var fileNameInput=$("#fileNameInput")[0].value;
            var fileSizeInput = $("#fileSizeInput")[0].value;
var userNumber =Number(fileSizeInput);
if (!isNaN(userNumber)&&isNotNull(fileNameInput)&&!isStringContainChars(fileNameInput,['/','\\']))
{
    $("#createForm")[0].submit();
}
else{
    alert("输出不合法")
}

        }
        function createDir()
        {
            var fileNameInput=$("#fileNameInput2")[0].value;
if (isNotNull(fileNameInput)&&!isStringContainChars(fileNameInput,['/','\\']))
{
    $("#createForm2")[0].submit();
}
else{
    alert("输出不合法")
}
        }
        function Delete()
        {
            var map={}
            map['fileName']=current.fileName;
            formSubmit('post','/showFileSystem/delete',map);
        }
        function Open()
        {
            let map={}
            map['fileName']=current.fileName;
            console.log(map)
            formSubmit('post','/showFileSystem/open',map);
        }
        function re()
        {
            formSubmit('post','/showFileSystem/re');
        }
        function showBlock()//显示当前物理块
        {
            var map={}
            map['inodeNumber']=current.inodeNumber;
            formSubmit('post','/showFileSystem/showBlock',map);
        }
    
  </script>
    <script th:inline="javascript">
        /*<![CDATA[*/
        var current=dirNodeClass(0,0,false);
        const targetList = $(".file");
        const menu = document.getElementById('menu');
        var allocateCondition =/*[[${allocateCondition}]]*/ {};
        let isFile =/*[[${isFile}]]*/[];

        let dirNode =/*[[${dirNode}]]*/ {};

        let error =/*[[${error}]]*/ null;
        let isShowBlock=/*[[${showBlock}]]*/ false;
        console.log(allocateCondition)
        console.log(dirNode)
        console.log(error)
        if (isNotNull(error)) {
            alert(error);
        }
        //以根节点制造文件
        if (isNotNull(dirNode))//节点
        {
            if (dirNode.childFile.length == 0) {//显示按钮
                var list=$(".disvisible")
                for(var i=0;i<list.length;i++)
                {
                    list[i].style="normal";
                }
                document.body.innerHTML += `<p>暂无任何文件</p>`
            }
            else {
                for (var i = 0; i < dirNode.childFile.length; i++) {
                    new dirNodeClass(dirNode.childFile[i].fileName, dirNode.childFile[i].inodeNumber, isFile[i]).addItem();
                }
            }
        }
        if( isNotNull(allocateCondition)){
            var button=$("#showBlockButton")[0];
            var text=$("#showBlockText")[0];
            if(isNotNull(allocateCondition.data))
            //data!=null普通文件（普通文件的操作)
          {
            text.innerHTML+=`data占的数据块(${allocateCondition.data.length}块)<br>`
            for(var i=0;i<allocateCondition.data.length;i++)
            {
               text.innerHTML+=`#${allocateCondition.data[i]}     `;
               if(i%4==0)
               text.innerHTML+=`<br>`
            }
            text.innerHTML+=`<br>`
            
          }
          if(isNotNull(allocateCondition.index))
            //data!=null普通文件（普通文件的操作)
          {
            text.innerHTML+=`index占的物理块(${allocateCondition.index.length}块)<br>`
            for(var i=0;i<allocateCondition.index.length;i++)
            {
               text.innerHTML+=`#${allocateCondition.index[i]}     `;
               if(i%4==0)
               text.innerHTML+=`<br>`
            }
            text.innerHTML+=`<br>`
          }
          if(isNotNull(isShowBlock)&&isShowBlock)
          {
            button.click();
          }
          
            
        }

    </script>
    <script>//绑定文件基本事件
        // 显示菜单
        function showMenu(event) {
            const x = event.clientX;
            const y = event.clientY;

            menu.style.left = `${x}px`;
            menu.style.top = `${y}px`;
            menu.style.display = 'block';

            // 点击菜单项后隐藏菜单
            menu.addEventListener('click', function () {
                menu.style.display = 'none';
            });

            // 点击其他地方隐藏菜单
            document.addEventListener('click', function () {
                menu.style.display = 'none';
            });
        }
    </script>
</body>

</html>